<template>
    <el-dialog :title="popTitle.title" :visible.sync="purvshow" width="50% !important" :show-close="false"
        :close-on-click-modal="false">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        <el-form style="height: 400px;overflow: auto;margin-top: 10px;">
            <el-tree class="filter-tree" :data="data" :default-checked-keys="textdata" default-expand-all
                :props="defaultProps" @check-change="checkChange" ref="tree" :filter-node-method="filterNode" node-key="id"
                show-checkbox>
            </el-tree>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelWorkOrder">取 消</el-button>
            <el-button type="primary" @click="determineWorkOrder">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { getData } from '@/api/table'
import { Message } from 'element-ui'
export default {
    props: {
        purvshow: {
            type: Boolean,
            required: true,
        },
        popTitle: {
            type: Object,
            required: true,
        },
        params: {
            type: Object,
            required: true,
        },
        data: {
            type: Array,
            required: true
        },
        purviewId: {
            type: Array,
            required: true
        },
    },
    data() {
        return {
            textdata: [],
            jurItem: '',
            formdata: null,
            // 模糊搜索
            filterText: '',
            // 选中的权限
            checkJurisd: [],
            // 选中权限数据处理
            checkJurisdData: [],
            // data: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            url: '',
            defaultProps: {
                children: 'children',
                label: 'label'
            },
        };
    },
    computed: {

    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
        purviewId(val) {
            this.$nextTick(() => {
                this.$refs.tree.setCheckedKeys(this.purviewId);
            })
        }
    },
    mounted() {
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        // 选中权限
        checkChange(data, checked, indeterminate) {
            // console.log(data, checked, indeterminate);

            // this.checkJurisd = []
            if (checked == false) {
                this.checkJurisd = this.checkJurisd.filter(item => item != data)
            }
            if (checked == true && indeterminate == false) {
                this.checkJurisd.push(data)
                this.checkJurisd = [...new Set(this.checkJurisd)]
            }
            // console.log(this.checkJurisd);

            if (checked == false && indeterminate == true) {
                this.checkJurisd.push(data)
            }
        },
        cancelWorkOrder() {
            this.checkJurisdData = []
            this.checkJurisd = []
            this.$emit('purview-event', false);
        },
        determineWorkOrder() {
            this.formdata = new FormData();
            for (let index = 0; index < this.checkJurisd.length; index++) {
                this.checkJurisdData.push(this.checkJurisd[index].id);
                this.checkJurisdData = [...new Set(this.checkJurisdData)];
            };
            this.item = this.checkJurisdData.join(',')
            console.log(this.item);

            this.formdata.append('modIds', this.item);
            this.formdata.append('roleId', this.params.roleId);
            this.url = '/module/allocateData'
            getData(this.url, 'post', this.formdata).then(res => {
                if (res.code !== 0) {
                    Message({
                        message: res.msg,
                        type: 'waring',
                        duration: 3 * 1000
                    })
                }
                Message({
                    message: res.msg,
                    type: 'success',
                    duration: 3 * 1000
                })
            })
            this.checkJurisdData = []
            this.checkJurisd = []
            this.$emit('purview-event', false);
        }
    },
    created() {

    }
};
</script>

<style  scoped></style>